← 返回學習記錄主頁

🔁 JavaScript 迴圈 (Loop) 使用指南

JavaScript 迴圈是程式設計的基礎，它能讓我們重複執行一段程式碼直到滿足特定條件。掌握這幾種迴圈，就能有效處理陣列、迭代數據和自動化任務。

核心迴圈類型

1. `for` 迴圈 (最常用於已知次數)

這是最常用且結構最清晰的迴圈，適用於您知道需要執行多少次的情況。

📌 語法結構

for (初始化; 條件; 遞增/遞減) {
  // 每次迴圈執行時要執行的程式碼
}

💡 範例：從 0 數到 4

for (let i = 0; i < 5; i++) {
  console.log("當前數字是: " + i);
}
輸出結果: 當前數字是: 0, 1, 2, 3, 4

2. `while` 迴圈 (最常用於條件判斷)

它只檢查一個條件。只要該條件為 true，迴圈就會繼續執行。務必確保在迴圈體內改變條件，以避免無限迴圈。

📌 語法結構

while (條件) {
  // 條件為 true 時執行
}

💡 範例：計數到 3

let count = 0;
while (count < 3) {
  console.log("計數器: " + count);
  count++; // 確保迴圈能終止的關鍵步驟
}
輸出結果: 計數器: 0, 1, 2

3. `do...while` 迴圈 (保證至少執行一次)

程式碼區塊 (do) 會先執行一次，然後才檢查條件 (while)。

💡 範例：條件不成立但依然執行

let x = 10;
do {
  console.log("這個程式碼被執行了，因為條件檢查在後!");
  x++;
} while (x < 5); // 條件 (10 < 5) 為 false
輸出結果: 這個程式碼被執行了，因為條件檢查在後!

4. `for...of` 迴圈 (專用於迭代值)

專門用於迭代 **陣列 (Array)** 或其他可迭代對象的**值**。

💡 範例：遍歷陣列元素

const fruits = ["蘋果", "香蕉", "橘子"];

for (const fruit of fruits) {
  console.log("我喜歡吃: " + fruit);
}
輸出結果: 我喜歡吃: 蘋果, 香蕉, 橘子

迴圈控制關鍵字

5.1. `break` (立即終止)

用於**立即跳出並終止**整個迴圈的執行。

for (let i = 0; i < 10; i++) {
  if (i === 5) {
    break; // i=5 時，迴圈結束
  }
  // ...
}

5.2. `continue` (跳過當前)

用於**跳過當前這一次迭代**中剩下的程式碼，直接進入下一次迭代。

for (let i = 0; i < 5; i++) {
  if (i === 2) {
    continue; // i=2 時，跳過後續程式碼，直接執行 i++ (i變為3)
  }
  // ...
}